<template>
  <div class="basic-container">
    <div class="top">
      <span class="title">基本信息</span>
      <div class="item">
        <span class="item-left"><label class="requrid">*</label>模型名称：</span>
        <div class="item-value">
          <a-input
            placeholder="请输入模型名称"
            allow-clear
            v-model="basicInfo.topicName"
            @change="basicInfoFlag.topicName = true"
          />
        </div>
        <span
          class="item-error"
          v-show="basicInfoFlag.topicName && basicInfo.topicName.length === 0"
        >
        模型名称不能为空
        </span>
      </div>
      <div class="item">
        <span class="item-left">模型描述：</span>
        <div class="item-value">
          <a-textarea
            placeholder="请输入模型描述"
            :auto-size="{ minRows: 3, maxRows: 3 }"
            allow-clear
            v-model="basicInfo.topicDesc"
          />
        </div>
      </div>

      <div class="item" style="margin-top:40px">
        <span class="item-left">所属专题：</span>
        <div class="item-value">
          <a-tree-select
            multiple
            :getPopupContainer="(triggerNode) => triggerNode.parentNode"
            placeholder="请选择所属专题"
            style="width: 100%;"
            :replaceFields="TopicReplaceFields"
            :dropdownStyle="{ maxHeight: '200px', overflow: 'auto' }"
            :treeData="topicTypes"
            v-model="basicInfo.topicType">
          </a-tree-select>
        </div>
      </div>
    </div>
    <div class="center">
      <span class="title">接口信息</span>
      <div class="item">
        <span class="item-left"><label class="requrid">*</label>是否启用：</span>
        <div class="item-value">
          <a-radio-group class="radio-line" v-model="basicInfo.status">
            <a-radio style="width: 120px" :value="1">启用</a-radio>
            <a-radio :value="2">停用</a-radio>
          </a-radio-group>
        </div>
      </div>
      <div class="item" style="margin-bottom: 5px;">
        <span class="item-left"><label class="requrid">*</label>接口编码生成方式：</span>
        <div class="item-value">
          <a-radio-group class="radio-line" v-model="type" @change="handleChangeType">
            <a-radio style="width: 120px" value="define">自定义</a-radio>
            <a-radio value="default">系统默认</a-radio>
          </a-radio-group>
        </div>
      </div>
      <div class="item">
        <span class="item-left"><label v-show="!typeFlag" class="requrid">*</label>编码：</span>
        <div class="item-value">
          <a-input
            v-model="basicInfo.serviceCode"
            allowClear
            placeholder="请输入编码(系统默认:编码使用存储表名称；自定义: 需用户输入)"
            :disabled="typeFlag"
          />
        </div>
      </div>
    </div>
    <div class="bottom">
      <span class="title">存储模型</span>
      <div class="item" style="margin-bottom: 15px">
        <span class="item-left"><label class="requrid">*</label>存储表名称：</span>
        <div class="item-value">
          <a-input
            placeholder="请输入存储表名称"
            allow-clear
            v-model="basicInfo.topicTable"
            @change="handleCheckTableOnly"
          />
        </div>
        <span class="item-error" v-show="basicInfoFlag.topicTable">{{ basicInfoFlag.topicTableFormatError ? '命名规则:只能由字母、数字、下划线、$符号组成;必须以字母开头;不能以单个字母加下滑线开头' :  (basicInfoFlag.topicTableOnly ? '存储表名称已经使用,请修改' : '存储表名称不能为空') }}</span>
      </div>
      <div class="content-box">
        <div class="left">
          <span class="title-item">指标选取</span>
          <a-alert message="当勾选的指标中包含率值指标时，无法进行聚合操作的指标选项将会被禁用" type="info" closable style="margin: 4px 10px -5px;" :afterClose="() => { isShowIndexSelectAlert = false }" />
          <div style="min-height: 32px; width: 100%; margin-top: 15px;">
            <span style="margin-left: 10px">维度：</span>
            <a-select
              v-model="searchObj.dimensionIds"
              placeholder="请选择维度"
              mode="multiple"
              style="width: 335px;"
              @change="handleSearch">
              <a-select-option v-for="item in dimensionArray" :key="item.id">
                {{ item.dimensionName }}
              </a-select-option>
            </a-select>
          </div>
          <div style="margin-top: 15px; min-height: 32px; width: 100%">
            <span style="margin-left: 10px">名称：</span>
            <a-input-search
              v-model="searchObj.configName"
              allowClear
              placeholder="请输入指标名称"
              style="width: 335px;"
              @change="handleSearch"
              @search="handleSearch"
            />
          </div>
          <a-spin tip="正在加载，请稍等" :spinning="treeDataLoading">
            <div class="left-bottom" :class="treeData.length === 0 ? 'data-empty' : ''" :style="{ minHeight: isShowIndexSelectAlert ? '150px' : '209px', maxHeight: isShowIndexSelectAlert ? '150px' : '209px' }">
              <a-tree
                v-if="treeData.length"
                checkable
                v-model="checkedKeys"
                :replace-fields="replaceFields"
                :tree-data="treeData"
                @check="handleTreeCheck" />
              <a-empty v-else :image="customImage" />
            </div>
          </a-spin>
        </div>
        <div class="btn">
          <a-button type="primary" class="btn-item" icon="double-right" @click="handleAppend" />
          <a-button type="primary" class="btn-item" style="margin-top: 5px" icon="double-left" @click="handleDelete" />
        </div>
        <div class="right">
          <div class="title-item">指标</div>
          <div class="item-box" :class="indexArray.length === 0 ? 'data-empty' : ''">
            <div v-if="indexArray.length" class="item-check" style="font-weight: 600">
              <a-checkbox :indeterminate="indeterminate" :checked="checkAll" @change="handleCheckAll">
                全选
              </a-checkbox>
            </div>
            <a-checkbox-group v-if="indexArray.length" v-model="checkedIndex" @change="handleChangeOne">
              <div v-for="item in indexArray" :key="item.id" class="item-check">
                <a-checkbox :value="item.id">{{ item.name }}</a-checkbox>
                <label class="item-tip-fa">({{ item.faName }})</label>
              </div>
            </a-checkbox-group>
            <a-empty v-else description="请选取指标" :image="customImage" />
          </div>
        </div>
        <div class="other">
          <div class="title-item">维度</div>
          <div class="item-box" :class="dimensionDataArray.length === 0 ? 'data-empty' : ''" :key="dimensionKey" style="padding-top: 5px;">
            <div
              class="item-check item-other"
              v-for="item in dimensionDataArray"
              :key="item.dimensionType"
              @click="handleSelectDimension(item)"
            >
              {{ item.name }}
              <label class="item-tip">(点击选中/取消)</label>
              <a-icon
                class="item-icon"
                type="check-circle"
                theme="twoTone"
                two-tone-color="#52c41a"
                v-show="item.selectFlag"
              />
            </div>
            <a-empty v-if="dimensionDataArray.length === 0" description="请选取指标" :image="customImage" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Empty } from 'ant-design-vue'
import { getAction } from '@/api/manage'

export default {
  name: 'TopicBasicInfo',
  props: {},
  data() {
    return {
      TopicReplaceFields: {
        children: 'childList',
        title: 'catalogName',
        key: 'id',
        value: 'id'
      },
      topicTypes: [],
      customImage: Empty.PRESENTED_IMAGE_SIMPLE,
      basicInfo: {
        topicName: '',
        topicDesc: '',
        status: 1,
        serviceCode: '',
        topicTable: ''
      },
      type: 'default',
      typeFlag: true,
      basicInfoFlag: {
        topicName: false,
        topicTable: false,
        topicTableOnly: false
      },
      dimensionArray: [],
      searchObj: {
        configName: '',
        dimensionIds: []
      },
      url: {
        list: '/index/config/listAllConfig',
        dimensionList: '/index/config/listDimension',
        checkName: '/topic/config/topicDuplicateCheck'
      },
      replaceFields: {
        children: 'indexInfoVoList',
        title: 'name',
        key: 'id'
      },
      checkedKeys: [],
      treeDataLoading: true,
      treeData: [],
      indexArray: [],
      tempIndexArray: [],
      dimensionDataArray: [],
      checkedIndex: [],
      dimensionKey: Math.random(),
      indeterminate: false,
      checkAll: false,
      isShowIndexSelectAlert: true,
      currentSelectedPercentIndexHasDimensionMaxNumber: 0 // 当前选中的、是率值的指标对应维度的最大数量参数，默认为0
    }
  },
  created() {
    this.handleGetDimensionList()
    this.handleSearch()
    this.getTopicTypes()
  },
  methods: {
    getTopicTypes() {
      this.topicTypes = []
      getAction('/index/config/queryIndexCatalog', {}).then((res) => {
        if (res.success) {
          this.topicTypes = res.result
        }
      })
    },
    /**
     * @description 获取维度信息列表
     * @returns void
     */
    handleGetDimensionList() {
      getAction(this.url.dimensionList, {}).then((res) => {
        if (res.code === 200) {
          this.dimensionArray = res.result
        } else {
          this.dimensionArray = []
        }
      }).catch(() => {
        this.dimensionArray = []
      })
    },

    /**
     * @description 校验名称的唯一性
     * @returns void
     */
    handleCheckTableOnly() {
      if (this.basicInfo.topicTable === null || this.basicInfo.topicTable === '') {
        this.basicInfoFlag.topicTable = true
        this.basicInfoFlag.topicTableOnly = false
        this.basicInfoFlag.topicTableFormatError = false
      } else if (!/^[a-zA-Z]{1}(?!_)[a-zA-Z0-9_\\$]+$/.test(this.basicInfo.topicTable)) {
        this.basicInfoFlag.topicTable = true
        this.basicInfoFlag.topicTableOnly = false
        this.basicInfoFlag.topicTableFormatError = true
      } else {
        this.basicInfoFlag.topicTableFormatError = false
        getAction(this.url.checkName, { topicTable: this.basicInfo.topicTable }).then((res) => {
          if (res.code === 200) {
            if (res.result.has === 0) {
              this.basicInfoFlag.topicTable = false
              this.basicInfoFlag.topicTableOnly = false
            }
            if (res.result.has === 1) {
              this.basicInfoFlag.topicTable = true
              this.basicInfoFlag.topicTableOnly = true
            }
          } else {
            this.basicInfoFlag.topicTable = false
            this.basicInfoFlag.topicTableOnly = false
          }
        }).catch(() => {
          this.basicInfoFlag.topicTable = false
          this.basicInfoFlag.topicTableOnly = false
        })
      }
    },

    /**
     * @description 选择维度信息
     * @returns void
     */
    handleSearch() {
      const obj = {
        configName: this.searchObj.configName,
        dimensionIds: this.searchObj.dimensionIds.toString()
      }
      this.treeDataLoading = true
      getAction(this.url.list, obj).then((res) => {
        if (res.code === 200) {
          // 构造树结构需要的数据结构
          res.result.map((item, index) => {
            item.name = item.configName
          })
          this.treeData = res.result
          this.handleUpdateIndexTreeData()
        } else {
          this.treeData = []
          this.$message.warning(res.message)
        }
      }).catch(() => {
        this.treeData = []
      }).finally(() => {
        this.treeDataLoading = false
      })
    },

    /**
     * @description 判断编方式
     * @returns void
     */
    handleChangeType() {
      if (this.type === 'define') {
        this.typeFlag = false
      }
      if (this.type === 'default') {
        this.typeFlag = true
        this.basicInfo.serviceCode = ''
      }
    },

    /**
     * @description 树节点点击事件
     * @returns void
     */
    handleTreeCheck(checkedKeys) {
      this.checkedKeys = checkedKeys
      // 过滤用户选中的数据,只移动叶子节点
      this.tempIndexArray = []
      checkedKeys.map((id, index) => {
        this.treeData.map((treeItem, index) => {
          // 父节点选中的情况
          if (treeItem.id === id) {
            treeItem.indexInfoVoList.map((sonItem, index) => {
              const obj = {
                id: sonItem.id,
                name: sonItem.name,
                isPercent: sonItem.isPercent,
                faName: treeItem.configName,
                dimensionInfoVoList: treeItem.dimensionInfoVoList
              }
              this.handleTempIndexArray(obj)
            })
          }
          treeItem.indexInfoVoList.map((ssonItem, index) => {
            if (ssonItem.id === id) {
              const obj = {
                id: ssonItem.id,
                name: ssonItem.name,
                isPercent: ssonItem.isPercent,
                faName: treeItem.configName,
                dimensionInfoVoList: treeItem.dimensionInfoVoList
              }
              this.handleTempIndexArray(obj)
            }
          })
        })
      })
    },

    /**
     * @description 单个选中操作
     * @returns void
     */
    handleChangeOne(checkedList) {
      this.indeterminate = !!checkedList.length && checkedList.length < this.indexArray.length
      this.checkAll = checkedList.length === this.indexArray.length
    },

    /**
     * @description 全选操作
     * @returns void
     */
    handleCheckAll(e) {
      const tempArray = []
      this.indexArray.map((item, index) => {
        tempArray.push(item.id)
      })
      this.checkedIndex = e.target.checked ? tempArray : []
      this.indeterminate = false
      this.checkAll = e.target.checked
    },

    /**
     * @description 处理指标数组
     * @param {*} obj
     * @returns void
     */
    handleTempIndexArray(obj) {
      let addFlag = true
      this.tempIndexArray.map((curItem, index) => {
        if (curItem.id === obj.id) {
          addFlag = false
        }
      })
      if (addFlag) {
        this.tempIndexArray.push(obj)
      }
    },

    /**
     * @description 往右侧追加数据
     * @returns void
     */
    handleAppend() {
      // 判断临时数组的数据
      if (this.tempIndexArray.length === 0) {
        this.$message.warning('请勾选左侧的指标')
      }
      // 获取计算当前次选中的率值指标中最大维度数量，并动态更新全局对应参数currentSelectedPercentIndexHasDimensionMaxNumber
      let currentPercentIndexHasDimensionMaxNumber = 0
      this.tempIndexArray.map(item => {
        if (item.isPercent && item.dimensionInfoVoList.length >= currentPercentIndexHasDimensionMaxNumber) currentPercentIndexHasDimensionMaxNumber = item.dimensionInfoVoList.length
      })
      this.currentSelectedPercentIndexHasDimensionMaxNumber = this.currentSelectedPercentIndexHasDimensionMaxNumber < currentPercentIndexHasDimensionMaxNumber ? currentPercentIndexHasDimensionMaxNumber : this.currentSelectedPercentIndexHasDimensionMaxNumber
      // 当前次选中的指标中存在率值指标时，过滤掉当前次选中的指标中不满足率值维度要求的指标，并根据情况做相应的信息提示
      if (this.currentSelectedPercentIndexHasDimensionMaxNumber) {
        const temp = []
        this.tempIndexArray.map(item => {
          if (item.dimensionInfoVoList.length >= this.currentSelectedPercentIndexHasDimensionMaxNumber) temp.push(item) // 过滤获取合规指标
        })
        if (temp.length !== this.tempIndexArray.length) this.$message.warning('已勾选的指标中包含率值指标，已剔除无法进行聚合操作的指标') // 存在被过滤的指标时，进行信息提示
        this.tempIndexArray = temp
      }
      // 追加数据得时候需要判断是否有重复的数据
      this.tempIndexArray.map((tempItem, index) => {
        let addFlag = true
        this.indexArray.map((item, index) => {
          if (tempItem.id === item.id) {
            addFlag = false
          }
        })
        if (addFlag) {
          this.indexArray.push(tempItem)
        }
      })
      // 移除选中指标中无法进行聚合操作的指标
      if (this.currentSelectedPercentIndexHasDimensionMaxNumber) {
        let removeFlag = false
        this.indexArray.map((item, index) => {
          if (this.currentSelectedPercentIndexHasDimensionMaxNumber > item.dimensionInfoVoList.length) {
            this.indexArray.splice(index, 1)
            removeFlag = true
          }
        })
        if (removeFlag) this.$message.warning('已勾选的指标中包含率值指标，已剔除选中指标中无法进行聚合操作的指标') // 存在移除动作时进行信息提示
      }
      // 取消树选中状态
      this.checkedKeys = []
      this.indeterminate = false
      this.checkAll = false
      this.tempIndexArray = []
      // 追加完数据之后，计算交集
      this.handleIntersection()
      this.handleUpdateIndexTreeData() // 根据率值指标选取更新指标选择树数据
    },

    /**
     * @description 从右侧移出选中的数据
     * @returns void
     */
    handleDelete() {
      // 判断用户是否选中要移出的指标
      if (this.checkedIndex.length === 0) {
        this.$message.warning('请勾选右侧需要移除的指标')
        return
      }
      if (this.checkedIndex.length > 0) {
        let length = this.indexArray.length
        this.checkedIndex.map((id, index) => {
          for (let i = 0; i < length; i++) {
            if (this.indexArray[i].id === id) {
              this.indexArray.splice(i, 1)
              length--
              i--
            }
          }
        })
        // 重新计算率值指标最大维度数量参数
        if (this.indexArray.length > 0) {
          // 选中指标未清空时，重新获取
          let currentPercentIndexHasDimensionMaxNumber = 0
          this.indexArray.map(item => {
            if (item.isPercent && item.dimensionInfoVoList.length >= currentPercentIndexHasDimensionMaxNumber) currentPercentIndexHasDimensionMaxNumber = item.dimensionInfoVoList.length
          })
          this.currentSelectedPercentIndexHasDimensionMaxNumber = currentPercentIndexHasDimensionMaxNumber
        } else {
          this.currentSelectedPercentIndexHasDimensionMaxNumber = 0 // 选中指标清空时，重置参数
        }
        this.handleUpdateIndexTreeData() // 更新指标树数据
        // 清空选中的数组
        this.indeterminate = false
        this.checkAll = false
        this.checkedIndex = []
        // 追加完数据之后，计算交集
        this.handleIntersection()
      }
    },

    /**
     * @description 处理交集属性
     * @returns void
     */
    handleIntersection() {
      if (this.indexArray.length === 0) {
        this.dimensionDataArray = []
      }
      if (this.indexArray.length === 1) {
        this.dimensionDataArray = this.indexArray[0].dimensionInfoVoList
        // 追加选中的标志
        this.dimensionDataArray.map((item, index) => {
          item.selectFlag = true
        })
      }
      if (this.indexArray.length > 1) {
        // 动态计算交集
        const finalArray = []
        const firstObj = this.indexArray[0].dimensionInfoVoList
        firstObj.map((firstObjItem, index) => {
          let addFag = true
          // 标识符判断数组
          const flagArray = new Array(this.indexArray.length - 1)
          for (let k = 0; k < flagArray.length; k++) {
            flagArray[k] = false
          }
          for (let i = 1; i < this.indexArray.length; i++) {
            const itemArray = this.indexArray[i].dimensionInfoVoList
            itemArray.map((curItem, index) => {
              if (firstObjItem.dimensionType === curItem.dimensionType) {
                flagArray[i - 1] = true
              }
            })
          }
          // 当标识符判断数据中所有的数据都为true时，则可以判定为公用元素
          flagArray.map((flag, index) => {
            if (flag === false) {
              addFag = false
            }
          })
          if (addFag) {
            firstObjItem.selectFlag = true
            finalArray.push(firstObjItem)
          }
        })
        this.dimensionDataArray = finalArray
      }
      // 强制dom节点更新
      this.dimensionKey = Math.random()
    },

    /**
     * @description 更新指标选择树数据节点可选属性
     * @returns void
     */
    handleUpdateIndexTreeData() {
      this.treeData.map(item => {
        if (item.dimensionInfoVoList.length < this.currentSelectedPercentIndexHasDimensionMaxNumber) {
          // 将指标维度数量小于当前选中率值指标维度数量的指标节点禁用
          this.$set(item, 'disabled', true) // 指标根禁用
          item.indexInfoVoList.map(subItem => {
            this.$set(subItem, 'disabled', true) // 指标禁用
          })
        } else {
          // 将指标维度数量不小于当前选中率值指标维度数量的指标节点启用
          this.$set(item, 'disabled', false) // 指标根启用
          item.indexInfoVoList.map(subItem => {
            this.$set(subItem, 'disabled', false) // 指标启用
          })
        }
      })
    },

    /**
     * @description 选择维度
     * @returns void
     */
    handleSelectDimension(item) {
      item.selectFlag = !item.selectFlag
      this.dimensionKey = Math.random()
    },

    /**
     * @description 验证数据的合法性
     * @returns void
     */
    handleDataRight() {
      // 校验数据的合法性
      const obj = {
        nextFlag: true,
        basicInfo: {},
        indexList: [],
        dimensionList: []
      }
      if (this.basicInfo.topicName === '') {
        this.$message.warning('模型名称不能为空!')
        obj.nextFlag = false
        return obj
      }
      // if (this.basicInfo.topicDesc === '') {
      //   this.$message.warning('模型描述不能为空!')
      //   obj.nextFlag = false
      //   return obj
      // }
      if (this.type === 'define' && this.basicInfo.serviceCode === '') {
        this.$message.warning('编码不能为空!')
        obj.nextFlag = false
        return obj
      }
      if (this.basicInfo.topicTable === '') {
        this.$message.warning('存储表名称不能为空!')
        obj.nextFlag = false
        return obj
      }
      if (this.basicInfoFlag.topicTable === true && this.basicInfoFlag.topicTableOnly === true) {
        this.$message.warning('存储表名称不能重复!')
        obj.nextFlag = false
        return obj
      }
      if (this.basicInfo.topicTable != null && this.basicInfo.topicTable != '') {
        if (!/^[a-zA-Z]{1}(?!_)[a-zA-Z0-9_\\$]+$/.test(this.basicInfo.topicTable)) {
          this.$message.warning('存储表格式错误')
          obj.nextFlag = false
          return obj
        }
      }
      // 判断指标和维度
      if (this.indexArray.length === 0) {
        this.$message.warning('指标不能为空，请从左侧树添加数据!')
        obj.nextFlag = false
        return obj
      }
      // 判断是否有共同的维度
      if (this.dimensionDataArray.length === 0) {
        this.$message.warning('所选择的指标没有共同的维度，请重新选择指标！')
        obj.nextFlag = false
        return obj
      }
      // 判读维度数据是否勾选
      if (this.dimensionDataArray.length > 0) {
        let flag = false
        this.dimensionDataArray.map((item, index) => {
          if (item.selectFlag) {
            flag = true
          }
        })
        if (!flag) {
          this.$message.warning('请勾选维度信息')
          obj.nextFlag = false
          return obj
        }
      }

      // 进行数据的封装
      obj.basicInfo = this.basicInfo
      this.indexArray.map((item, index) => {
        obj.indexList.push(item.id)
      })
      this.dimensionDataArray.map((item, index) => {
        if (item.selectFlag) {
          obj.dimensionList.push(item.dimensionType)
        }
      })
      return obj
    }

  }
}
</script>

<style lang="less" scoped>
.basic-container {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 0 20px;
  overflow-y: auto;
  .title {
    font-size: 15px;
    font-family: PingFang SC, PingFang SC-Regular;
    font-weight: 500;
    color: #222222;
    width: 100%;
    text-align: left;
  }
  .top {
    width: 100%;
    height: 200px;
    border-bottom: 1px solid #d9d9d9;
    padding-top: 5px;
  }
  .center {
    width: 100%;
    height: 155px;
    border-bottom: 1px solid #d9d9d9;
    padding-top: 10px;
  }
  .top,
  .center,
  .bottom {
    .item {
      width: 100%;
      height: 33px;
      margin-bottom: 15px;
      .item-left {
        width: 225px;
        float: left;
        text-align: right;
        line-height: 32px;
        font-size: 14px;
        padding-left: 80px;
        padding-right: 10px;
        .requrid {
          color: red;
        }
      }
      .item-value {
        float: left;
        width: 1005px;
        .radio-line {
          line-height: 33px;
        }
      }
      .item-error {
        float: left;
        line-height: 22px;
        margin-left: 238px;
        font-size: 12px;
        color: red;
      }
    }
  }
  .bottom {
    width: 100%;
    height: calc(100% - 305px);
    padding-top: 10px;
    .content-box {
      width: 100%;
      height: calc(100% - 55px);
      .left,
      .btn,
      .right,
      .other {
        height: 100%;
        float: left;
      }
      .left {
        width: 400px;
        margin-left: 80px;
        display: flex;
        flex-flow: column;
        align-items: center;
        align-content: flex-start;
        border: 1px solid #d9d9d9;
        ::v-deep .ant-alert-close-icon {
          top: 2px;
          right: 6px;
        }
        ::v-deep .ant-spin-nested-loading {
          width: 100%;
        }
        .left-bottom {
          width: 100%;
          margin-top: 10px;
          padding-left: 3px;
          flex: 1;
          overflow: auto;
          ::v-deep .ant-tree li {
            padding: 5px 0;
            &:first-child {
              padding-top: 7px;
            }
          }
        }
      }
      .btn {
        width: 60px;
        display: flex;
        align-items: center;
        align-content: center;
        flex-flow: row wrap;
        padding: 141px 0;
        .btn-item {
          width: 76%;
          padding: 0 !important;
          height: 30px !important;
          margin-left: 16%;
        }
      }
      .right {
        width: 350px;
        border: 1px solid #d9d9d9;
      }

      .other {
        width: 335px;
        border: 1px solid #d9d9d9;
        margin-left: 5px;
      }
      .left,
      .right,
      .other {
        .title-item {
          width: 100%;
          height: 32px;
          text-align: left;
          padding-left: 5px;
          background: #f7f7f7;
          line-height: 32px;
        }
        .item-box {
          width: 100%;
          height: calc(100% - 32px);
          min-height: 313px;
          max-height: 313px;
          overflow: auto;
          .item-check {
            padding-left: 15px;
            margin-top: 5px;
            .item-tip-fa {
              font-size: 13px;
              color: #cdcdcd;
              opacity: 0.8;
            }
          }
          .item-other {
            cursor: pointer;
            width: 100%;
            position: relative;
            height: 30px;
            line-height: 30px;
            margin-top: 0;
            margin-bottom: 6px;
            background: #fdfdfd;
          }
          .item-other:hover {
            background-color: #f1f0f0;
          }
          .item-tip {
            position: absolute;
            font-size: 13px;
            color: #cdcdcd;
            opacity: 0.8;
            right: 45px;
          }
          .item-icon {
            position: absolute;
            top: 7px;
            font-size: 16px;
            right: 15px;
          }
        }
      }
    }
  }
  .data-empty {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}
</style>

<style lang="less">
.basic-container {
  .ant-tree li .ant-tree-node-content-wrapper {
    max-width: 295px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
</style>
